<template>
	<div id="authorInfo" class="ui-main">
		<!-- <frame-navigation showback="false" showrefresh="true" title="" showset="true" v-on:editclick="editBtnClick"></frame-navigation> -->

		<div v-if="!isEdit" class="head">
			<img v-if="!isEdit" :src="info.headUrl" width="100" height="100" />
		</div>
		<div v-if="isEdit" v-bind:class="['head' ,isEdit ? 'head_editing':'']">
			<input id="portraitCoverFile" type="file" accept="image/*" @change="portraitCoverChange" style="display: none;" />
			<img id="portraitImage" :src="info.headUrl" width="100" height="100" @click="imageClick(0)" />
		</div>

		<div class="word name">
			<input :class="isEdit?'editing':'disableEdit'" v-bind:disabled="!isEdit" v-model="info.username" placeholder="请输入用户名" />
		</div>
<!-- 		<div class="indicator" v-if="!isEdit">
			<div class="col"><a href="#">月票：{{info.yuepiao}}</a></div>
			<div class="col"><a href="#">我的评论：{{info.yuepiao}}</a></div>
		</div> -->
		<div v-if="!isEdit" class="introduce">
			{{(!info.description || info.description == "")?"喜欢给个好评吧！":info.description}}
		</div>
		<textarea v-if="isEdit" class="introduce introduceEditing" v-model="info.description" placeholder="输入个人描述"></textarea>
		<button class="submit_btn" v-if="isEdit" v-on:click="submitBtnClick()">提交</button>
		<div class="enterTime">加入时间：{{info.createTime}}</div>
	</div>
</template>

<script>
	import UserInfoManager from "../../js/UserInfoManager.js"
	import HttpUtil from "../../js/HttpUtil.js"
	import SLMUtil from "../../js/SLMUtil.js"
	import SLMComm from "../../js/SLMComm.js"
	import CommUpload from "../../js/store/CommUpload.js"

	export default {
		data() {
			return {
				isEdit: false,
				serviceInfo: null,
				info: {
					username: " ",
					headUrl: "",
					createTime: "",
					sex: "2",
					hot: "0",
					love: "0",
					yuepiao: "0",
					description: "木有简介"
				},
				editInfo: null,
			}
		},
		mounted() {
			
			let that = this;
			let sessionKey = UserInfoManager.getInfo().userExt.sessionKey
			var params = new URLSearchParams();
			params.append('sessionKey', sessionKey);
		
			HttpUtil.post('user/getDetail.do', params)
				.then(response => {
					console.log(JSON.stringify(response.data));
		
					if (response.data.code == 0) {
						let info = response.data.data.user
						let date = SLMComm.timeStrToDate(info.createTime)
						console.log("字符串转date完成："+date)
						var newInfo = info
						newInfo.createTime = SLMComm.dataForamt(date, "yyyy年MM月dd日")
						that.serviceInfo = newInfo;
						that.info = SLMUtil.copyProperties(that.serviceInfo, null, true, true)
		
						UserInfoManager.save(info)
						
						var headUrl = that.info.headUrl
						if (headUrl == undefined || headUrl == "") {
							headUrl = require('../../resources/images/defaultAdminHead.png')
							that.info.headUrl = headUrl
						}
						that.userInfoRefreshComplete()
					}
				})
				.catch(function(error) {
					console.log(error);
				});
				
				// let str = "2022-01-16 12:40:04:000"
				// var date = SLMComm.timeStrToDate(str)
				// var format = SLMComm.dataForamt(date, "yyyy年MM月dd日")
				// console.log("===转日期完成："+date)
				// console.log("===2转日期完成："+format)
		},
		methods: {
			userInfoRefreshComplete:function() {
				console.log("用户信息获取完成")
				this.$emit('getUserInfoComplete')//需要传参则，param
			},
			editBtnClick: function(isEdit) {
				this.isEdit = isEdit;
				if (isEdit) {
					if (this.editInfo) { //有编辑信息 显示当前编辑信息
						SLMUtil.copyProperties(this.editInfo, this.info, true, true)
						console.log("this.info.headUrl:" + this.info.headUrl)
						$("#portraitImage").attr("src", this.info.headUrl);
					}
				} else { //取消编辑，将编辑信息保存起来
					this.editInfo = SLMUtil.copyProperties(this.info, this.editInfo, true, true)
					console.log("编辑信息：" + JSON.stringify(this.editInfo))
					SLMUtil.copyProperties(this.serviceInfo, this.info, true, true)
				}

				try {
					//父frame刷新高度
					this.$nextTick(() => { //下次DOM更新执行
						console.log("DOM 更新了,让父frame刷新高度+++++++");
						if (parent) {
							parent.refreshIframesHeight();
						}

					})
				} catch (error) {
					console.log("warn:刷新父frame失败")
				}

			},
			submitBtnClick: function() {


				let that = this;
				let sessionKey = UserInfoManager.getInfo().userExt.sessionKey
				var params = new URLSearchParams();
				params.append('sessionkey', sessionKey);
				params.append('headUrl', this.info.headUrl);
				//params.append('password', this.info.headUrl);
				//params.append('phone', this.info.headUrl);
				//params.append('sex', this.info.headUrl);
				params.append('username', this.info.username);
				params.append('description', this.info.description);

				console.log('params：' + params);
				HttpUtil.post('user/eidtorUserInfo.do', params)
					.then(response => {
						console.log(JSON.stringify(response.data));

						if (response.data.code == 0) {
							//let userExt = UserInfoManager.getInfo().userExt
							let info = response.data.data
							// info.userExt = userExt;
							// console.log("改名成功，更新用户信息："+info);
							UserInfoManager.save(info)
							window.location.reload()
						} else {
							alert(response.data.message)
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			imageClick: function(index) {
				if (index == 0) {
					$("#portraitCoverFile").click();
				}
			},
			portraitCoverChange: function(event) {
				let that = this;
				this.handleCoverSelected(event, function(inputFile, imgData, mimeType) {
					$("#portraitImage").attr("src", imgData);

					//var timestamp = Date.parse(new Date());
					let userId = UserInfoManager.getInfo().id
					let timeStamp = SLMUtil.getCurTimeStamp()
					let fileName = HttpUtil.getUploadPrefix() + "user_head_" + userId + "_" + timeStamp + "." + mimeType
					console.log("文件名：" + fileName);
					updateImageProgress("#portraitImage", 5);
					CommUpload.uploadFile(fileName, inputFile, function(progress) {
						updateImageProgress("#portraitImage", progress);
					}, function(imgUrl) {
						console.log("拿到七牛图片地址：" + imgUrl);
						if (that.isEdit) {
							that.info.headUrl = "http://qinniu.goddragon.pub/" + imgUrl
						} else {
							that.editInfo.headUrl = "http://qinniu.goddragon.pub/" + imgUrl;
						}
					});
				});

			},
			handleCoverSelected: function(event, complete) {
				if (!event.target.files || !event.target.files[0]) {
					return
				}
				let inputFile = event.target.files[0];
				console.log("inputFile：" + inputFile)

				var mimeType = "jpg"
				if (inputFile.type == 'image/png') {
					mimeType = "png"
				}

				if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png') {
					alert('不是有效的图片文件！');
					return;
				}
				const reader = new FileReader();
				reader.readAsDataURL(inputFile);
				reader.onload = function(e) {
					let imgData = e.target.result;
					complete(inputFile, imgData, mimeType)
				}

			}
		}
		
	}
</script>

<style scoped>
	@import "../../css/UserInfo.css";
</style>
